<template>
	<div>
		<div class="home">
			<div v-for="item in 8" class="home-T1">
				<img class="icon-img-content" src="http://img1.qunarzz.com/piao/fusion/1804/5a/13ceb38dcf262f02.png" >
				<p>{{item}}</p>
			</div>
		</div>
		<div class="home-T2">
			<div>热销推荐</div>
		</div>
		<div class="home-T3">
			<div class="home-t4" >
				<img class="img-1"  src="http://img1.qunarzz.com/sight/p0/1708/2b/2b3b94de99c0a425a3.img.jpg_200x200_2458ffb2.jpg" />
				<div class="home-t5">
					<p class="home-t6">故宫</p>
					<p class="home-t7">东方宫殿代表，世界宫殿建筑典范</p>
					<button class="home-t8">查看详情</button>
				</div>
			</div>
			<div class="home-t4" >
				<img class="img-1"  src="http://img1.qunarzz.com/sight/source/1505/9e/21df651e19af5d.jpg_r_640x214_3ea5bb38.jpg" />
				<div class="home-t5">
					<p class="home-t6">南山滑雪场</p>
					<p class="home-t7">北京专业级滑雪圣地</p>
					<button class="home-t8">查看详情</button>
				</div>
			</div>
			<div class="home-t4" >
				<img class="img-1"  src="http://img1.qunarzz.com/sight/p0/1602/92/920e47352552c1c990.water.jpg_200x200_dba18b05.jpg" />
				<div class="home-t5">
					<p class="home-t6">天安门广场</p>
					<p class="home-t7">我爱北京天安门，天安门上太阳升</p>
					<button class="home-t8">查看详情</button>
				</div>
			</div>
			<div class="home-t4" >
				<img class="img-1"  src="http://img1.qunarzz.com/sight/p0/1603/85/85c883189bf7293390.water.jpg_200x200_3165123d.jpg" />
				<div class="home-t5">
					<p class="home-t6">故宫</p>
					<p class="home-t7">东方宫殿代表，世界宫殿建筑典范</p>
					<button class="home-t8">查看详情</button>
				</div>
			</div>
		</div>
		<div class="home-T2">
			<div>周末去哪</div>
		</div>
		<div class="home-t8">
			<div class="home-t9" >
				<img class="img-2"  src="https://imgs.qunarzz.com/sight/source/1811/f3/86173f863bef61.jpg_r_640x214_52b003ac.jpg" />
				<div class="home-t10">
					<p class="home-t11">京城周末撒欢</p>
					<p class="home-t12">在帝都过周末，不仅仅是城中游！</p>
				</div>
			</div>
			<div class="home-t9" >
				<img class="img-2"  src="https://imgs.qunarzz.com/sight/source/1811/7e/476589267ebb41.jpg_r_640x214_bf599709.jpg" />
				<div class="home-t10">
					<p class="home-t11">京城溜娃必去</p>
					<p class="home-t12">德智体美劳全面发展的亲子日，这些地方该去看看…</p>
				</div>
			</div>
			<div class="home-t9" >
				<img class="img-2"  src="https://imgs.qunarzz.com/sight/source/1505/aa/7baaf8a851d221.jpg_r_640x214_1431200f.jpg" />
				<div class="home-t10">
					<p class="home-t11">帝都必打卡</p>
					<p class="home-t12">来北京必去的景点非这些地方莫属</p>
				</div>
			</div>
			<div class="home-t9" >
				<img class="img-2"  src="https://imgs.qunarzz.com/sight/source/1606/85/c6b6bad1b977e.jpg_r_640x214_5c638941.jpg" />
				<div class="home-t10">
					<p class="home-t11">漂流勇进，烧烤露营</p>
					<p class="home-t12">轻松水上漂，任我乐逍遥</p>
				</div>
			</div>
			<div class="home-t9" >
				<img class="img-2"  src="https://imgs.qunarzz.com/sight/source/1505/53/02091f1ee43d0a.jpg_r_640x214_2e3256b1.jpg" />
				<div class="home-t10">
					<p class="home-t11">北京清凉避暑胜地</p>
					<p class="home-t12">到大自然中享受“天然空调”的清凉</p>
				</div>
			</div>
		</div>
	</div>
</template>

<script>
export default {
  name: "HomeView",
  components: {
  },
};
</script>
<style lang="scss" scoped>
	.home{
		display: flex;
		flex-wrap: wrap;
		width: 100%;
		justify-content: space-between;
		text-align: center;
		img{
			width: 40px;
			height: 40px;
		}
		p{
			margin: 0;
			padding: 0;
		}
	}
	.home-T1{
		flex: 24%;
	}
	.home-T2{
		font-size: 22px;
		margin-top: 8px;
		margin-left: 4px;
	}
	.home-t4{
		display: flex;
	}
	.home-t7{
		/*margin: 0;*/
		/*padding: 0;*/
	}
	.img-1{
		width: 130px;
		height: 120px;
	}
	.img-2{
		width: 100%;
		height: 130px;
	}
	.home-t10{
		p{
			margin: 5px;
		}
	}
</style>
